<template>
  <div class="stadium">
    <!-- 搜索框 -->
    <van-search @search="onSearch" @click-left-icon="onSearch(value)" v-model="value" placeholder="请输入搜索关键词"/>
    <!-- 场馆列表 -->
    <div>
      <van-empty v-if="!venueData" description="无数据" />
    </div>
    <!-- 测试传参案例 -->
    <!-- <router-link :to="{path:'/stadium_details',query:{fid:fid}}" :fid="fid">-->
      <div class="show_list" v-if="venueData">
        <div class="show_card" v-for="item in venueData" :key="item.venue_id" @click="goDetail(item.venue_id)">
          <img @click.stop="lookImg(item.venue_img)" class="card_show" :src="item.venue_img" alt="">
          <div class="card_text">
            <p>{{ item.venue_name }}</p>
            <p>地址：{{ item.venue_city }}</p>
            <p>手机号: {{ item.venue_phone }}</p>
          </div>
          <div class="card_server">
            <div class="card_positon">
              <img src="../assets/posation.svg" alt="">
              <span>据您{{ item.venue_distance }}KM</span>
            </div>
            <div class="card_showbtn">
              <van-button v-if="item.venue_status === '1'" class="card_showbtn" type="info"  size="small">{{ item.venue_status === '1' ? isOpen : isDown }}</van-button>
              <van-button v-if="item.venue_status === '0'" class="card_showbtn" type="danger"  size="small">{{ item.venue_status === '1' ? isOpen : isDown }}</van-button>
            </div>
          </div>
        </div>
      </div>
    <!--</router-link>-->
    <Tabbar active="stadium"/>
  </div>
</template>

<script>
import Tabbar from '../components/Tabbar'
import {findVenue, getVenue} from '../http/api'
import { ImagePreview } from 'vant'
// import qs from 'qs'

export default {
  name: 'stadium',
  components: {Tabbar},
  data() {
    return {
      value: '',
      isOpen: '开放',
      isDown: '闭馆',
      venueData: null
    };
  },
  methods: {
    getVenues() {
      getVenue().then(res => {
        this.venueData = res.data.data
      })
    },
    lookImg(val) {
      ImagePreview([val])
    },
    onSearch(val) {
      findVenue({ searchValue: val }).then(res => {
        this.venueData = res.data.data
      })
    },
    goDetail(id) {
      this.$router.push(`/stadium_details/${id}`)
    }
  },
  mounted() {
    this.getVenues()
    this.$store.state.title = '场馆列表'
  }
};
</script>

<style scoped>
.show_card {
  width: 100%;
  display: flex;
  background-color: rgb(250, 250, 250);
  margin-bottom: 10px;
}

.card_show {
  width: 88px;
  height: 88px;
  margin: 20px;
}

.isOpen_btn {
  float: right;
  border-radius: 10px;
}

.card_text {
  width: 70%;
}

.card_text > p:nth-child(1) {
  font-size: 1rem;
  margin-bottom: 25px;
  margin-left: 5px;
}

.card_text > p:nth-child(2), .card_text > p:nth-child(3) {
  margin: 0;
  font-size: 0.1rem;
  margin-left: 5px;
  width: 140px;
}

.card_server {
  left: 70%;
  text-align: center;
}

.card_positon {
  margin-top: 20px;
  width: 100px;
}

.card_positon > img {
  width: 24px;
  height: 20px;
  vertical-align: middle;
}

.card_positon > span {
  font-size: 13px;
  vertical-align: middle;
}

.card_showbtn {
  margin: 10px auto;
  border-radius: 10px;
}

a {
  color: #000;
}
</style>
